<template>
	<view class="shop_shop">
		<view class="shop_title">
			<view class="shop_title_left">

			</view>
			<view class="shop_title_center">
				购物车
			</view>
			<view class="shop_title_right">
				<u-icon name="trash" v-show="delFlat" @click="delShop" color="#a2a2a2" size="22"></u-icon>
			</view>
		</view>
		<view class="shop_main">
			<u-empty class="empty" v-if="list.length==0" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<!-- 	<view class="shop_list">
				<view class="shop_tab" v-for="item in checkboxList1">
					<view class="tab_btn">
						<checkbox :checked="item.disabled" />
					</view>
					<view class="tab_left">

					</view>
					<view class="tab_middle">

					</view>
					<view class="tab_right">

					</view>
				</view>
			</view>
		 -->
			<checkbox-group class="shop_list" @change="changetodo">
				<view class="shop_tab" v-for="(item,index) in list" :key="item._id">
					<view class="tab_checked">
						<checkbox :value="item.id" color="#ff78a2" :checked="item.flat" />
					</view>
					<view class="tab_img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="tab_desc">
						<view class="desc_top">{{item.item_shops}}</view>
						<view class="desc_center">{{item.title}}</view>
						<view class="desc_bottom">￥{{item.money}}</view>
					</view>
					<view class="tab_num">
						<view class="add" @click="delNum(index)">
							-
						</view>
						<view class="num">
							{{item.count}}
						</view>
						<view class="del" @click="addNum(index)">
							+
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="tran3">
			<view class="tran3_title">
				为你推荐
			</view>
			<view class="other_list">
				<view class="other_tab" @click="jumpDetail(item.item_id)" v-for="item in otherShopList">
					<image :src="item.item_img" mode=""></image>
					<view class="other_tab_desc">
						{{item.item_title}}
					</view>
					<text class="other_price">
						{{item.item_price}}
					</text>
				</view>

			</view>
		</view>
		<view class="fixed_box">
			<view class="fixed_all">
				<checkbox-group v-if="list.length>0" @change="selectAll">
					<checkbox :checked="toggleFlat" color="#ff78a2" /><text>{{toggleFlat?'全不选':'全选'}}</text>
				</checkbox-group>

			</view>
			<view class="settlement">
				<text class="count">合计 :</text>
				<text class="count2">{{sum}}</text>
				<u-button class="settlement_btn" @click="jumpOrder" text="结算" color="#ff78a2"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toggleFlat: false,
				sum: 0,
				list: [],
				flat: true,
				delFlat: false,
				otherShopList: []
			};
		},
		computed: {},
		onShow() {
			this.otherList()
			if (uni.getStorageSync("_id")) {
				uniCloud.callFunction({
					name: "user_shop_bag",
					data: {
						item_id: uni.getStorageSync("_id"),
						type: -1
					}
				}).then((res) => {
					console.log(res.result)
					this.list = res.result.reverse()
				}).then(() => {
					this.list.map((item) => {
						item["money"] = item.price * item.count
					})
				})
			} else {
				uni.showModal({
					title: '请先登录',
					content: '确定前登录页？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#333',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							}) //点击确定之后执行的代码
						} else {
							uni.switchTab({
								url: "/pages/index/index"
							}) //点击取消之后执行的代码
						}
					}




				})
			}

		},
		onHide() {
			console.log(123)
			// console.log(this.list.count)

			// let dd = this.list(item => {
			// 	return {
			// 		item.count,
			// 		item.uid,
			// 		item.item_id
			// 	}
			// })
			if (this.flat && this.list.length > 0) {
				let dd = []
				for (let i = 0; i < this.list.length; i++) {
					dd.push({
						count: this.list[i].count,
						uid: this.list[i].uid,
						item_id: this.list[i].item_id,
						type: -1
					})
				}
				console.log(dd)
				uniCloud.callFunction({
					name: "update_shop_bag",
					data: dd
				}).then((res) => {
					console.log(res)
				})
			}

		},
		watch: {
			list: {
				handler(newVal, oldVal) {
					let eFlat = newVal.every((item) => {
						return item.flat == true
					});
					let sFlat = newVal.some((item) => {
						return item.flat == true
					});
					this.toggleFlat = eFlat;
					this.delFlat = sFlat;
					let testNum = 0
					this.list.map((item) => {
						item["money"] = item.price * item.count
						if (item.flat) {
							testNum += item.money

						}

					})
					this.sum = testNum
					// this.sum.count = 0

					// this.sum.list.map(item => {
					// 	this.sum.count += item.money
					// })
				},
				immediate: true,
				deep: true
			},


		},
		methods: {
			otherList() {
				uniCloud.callFunction({
					name: "orther_shop",

				}).then((res) => {
					this.otherShopList = res.result.data
				})
			},
			delShop() {
				console.log(123)
				let anArr = this.list.filter((item) => {
					return item.flat == true
				})
				let eFlat = []
				// console.log(anArr, 123)
				// let anArr = this.list;

				for (let i = 0; i < anArr.length; i++) {
					eFlat.push(anArr[i]._id)
				}
				console.log(eFlat)

				uniCloud.callFunction({
					name: "del_user_shop",
					data: {
						_id: eFlat
					}
				}).then((res) => {
					console.log(res)
					this.list = this.list.filter((item) => {
						return item.flat == false
					})
					uni.showToast({
						title: "删除成功"
					})
				})
			},
			selectAll(e) {
				let testNum = 0
				this.toggleFlat = !this.toggleFlat

				this.list.map((item) => {
					item.flat = this.toggleFlat
					if (item.flat) {
						testNum += item.money
					}
				})

				this.sum = testNum
			},
			jumpOrder() {
				this.flat = false;

				let anArr = this.list.filter((item) => {
					return item.flat != false
				})
				let eFlat = []
				if (anArr.length > 0) {
					for (let i = 0; i < anArr.length; i++) {
						eFlat.push(anArr[i]._id)
					}
					console.log(eFlat)
					uniCloud.callFunction({
						name: "user_shop_state",
						data: {
							_id: eFlat
						}
					}).then((res) => {
						console.log(res)
						uni.setStorageSync("shop_id", eFlat)
					}).then(() => {
						uni.navigateTo({
							url: "/pages/order/order"
						})
					})


				} else {
					uni.showToast({
						title: "未选中商品",
						icon: "none"
					})
				}


			},
			jumpDetail(sid) {

				uni.removeStorageSync("flat")
				uni.navigateTo({
					url: `/pages/detail/detail?sid=${sid}&flat=0`
				})
			},
			changetodo(e) {
				console.log(e.detail.value)
				let val = e.detail.value
				let testNum = 0 // 不用看
				this.list.map((item) => {
					let flat = val.includes(item.id) // 你的_id
					item.flat = flat
					if (item.flat) { // 不用看
						testNum += item.money
					}
				})
				this.sum = testNum
				console.log(this.list, testNum)
			},
			addNum(index) {
				this.list[index].count++


			},
			delNum(index) {
				if (this.list[index].count > 1) {
					this.list[index].count--
					// this.list[index]["money"] = this.list[index].price * this.list[index].count
				}
			}
		}
	}
</script>

<style lang="scss">
	.tran3 {
		margin: 20rpx 0;
		padding: 30rpx 40rpx 0;
		background-color: white;

		.other_list {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;

			image {
				width: 100%;
				height: 100%;
			}

			.other_tab {
				width: 32%;
				height: 190px;

				.other_tab_desc {
					margin-top: 4px;
					font-size: 12px;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 32px;
				}

				.other_price {
					display: block;
					color: #ff78a2;
					margin-top: 4px;

					&::before {
						content: "￥";
						font-size: 12px;
						margin-right: -2px;
					}
				}

				image {
					height: 110px;
				}
			}
		}

	}

	.empty {
		padding: 20px;

	}

	.settlement_btn {
		border-radius: 20px;
		width: 100px;
		margin: 0;
		font-weight: 500;
	}

	.fixed_box {
		position: fixed;
		bottom: 50px;
		left: 0;
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f3f3;

		.fixed_all {
			margin-left: 20px;
			font-size: 14px;
			line-height: 25px;

		}

		.settlement {
			width: 190px;
			height: 100%;
			margin-right: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.count {
				font-size: 13px;




			}

			.count2 {
				font-size: 16px;

				color: #ff78a2;

				&::before {
					content: "￥";
					color: #ff78a2;
					font-size: 12px;
				}
			}
		}

	}

	.tab_checked {
		margin-left: 10px;
	}

	.bigbox {
		display: flex;
	}

	.tab_desc {
		.desc_top {
			margin-bottom: 4px;
		}

		.desc_center {
			color: #999;
			font-size: 13px;
			font-weight: 100;
			margin-bottom: 10px;
			width: 110px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.desc_bottom {
			color: #ff78a2;
		}
	}


	.shop_main {
		margin: 20px;

		.shop_list {
			width: 100%;
			min-height: 400px;

			.shop_tab {
				width: 100%;
				background-color: white;
				height: 120px;
				margin-bottom: 20px;
				border-radius: 8px;
				display: flex;
				align-items: center;

				.tab_img {
					width: 100px;
					background-color: white;
					height: 100px;
					margin: 0 10px;
					border-radius: 12px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tab_num {
					display: flex;
					margin-top: 70px;

					.add {
						background-color: #f7f7f7;

						color: #ff78a2;
						width: 20px;
						text-align: center;
						line-height: 20px;
						border-radius: 4px;
					}

					.num {
						width: 20px;
						text-align: center;
						font-size: 14px;
						line-height: 20px;
						color: #ffc1dd;
					}

					.del {
						background-color: #f7f7f7;
						border-radius: 4px;
						color: #ff78a2;
						width: 20px;
						text-align: center;
						line-height: 20px;
					}
				}
			}
		}
	}

	.shop_shop {
		min-height: 100vh;
		width: 100%;
		background-color: #f2f3f3;
		position: relative;
		padding-bottom: 30px;

		.shop_title {
			height: 50px;
			display: flex;
			background-color: white;
			justify-content: space-between;
			align-items: center;

			.shop_title_left {
				width: 20px;
				margin-left: 20px;
			}

			.shop_title_right {
				margin-right: 20px;
				width: 22px;
			}
		}
	}
</style>